<template>
    <div>
        <div class="imwe-vue-amap"></div>
        <slot></slot>
    </div>
</template>
<script>
import register from "../utils/register";
import { getamapHandle } from "../utils/init";
import guid from "../utils/guid";
import constants from "../utils/constants";
export default {
    name: "imwe-map",
    data() {
        return {};
    },
    mixins: [register],
    props: [
        "vid",
        "events",
        "center",
        "zoom",
        "draggEnable",
        "level",
        "zooms",
        "lang",
        "defaultCursor",
        "crs",
        "animateEnable",
        "isHotspot",
        "defaultLayer",
        "rotateEnable",
        "resizeEnable",
        "showIndoorMap",
        "indoorMap",
        "expandZoomRange",
        "dragEnable",
        "zoomEnable",
        "doubleClickZoom",
        "keyboardEnable",
        "jogEnable",
        "scrollWheel",
        "touchZoom",
        "mapStyle",
        "plugin",
        "features",
        "viewMode"
    ],
    created() {},
    mounted() {
        console.log("map mounted");
        this.createMap();
    },
    methods: {
        createMap() {
            getamapHandle().then(AMap => {
                let mapElement = this.$el.querySelector(".imwe-vue-amap");

                const elementID = this.vid || guid();
                console.log("elementId", elementID);
                mapElement.id = elementID;
                this.$amap = this.$amapComponent = new AMap.Map(
                    elementID,
                    this.convertProps()
                );
                console.log('amap',this.$amap);
                if (this.amapManager) this.amapManager.setMap(this.$amap);
                this.$emit(constants.AMAP_READY_EVENT, this.$amap);
                this.$children.forEach(component => {
                    component.$emit(constants.AMAP_READY_EVENT, this.$amap);
                });
            });
        }
    },
    watch: {}
};
</script>
<style>
.imwe-vue-amap {
    height: 1300px;
}
</style>
